<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="format-detection" content="telephone=no">
    <title>支付结果</title>
    <script src="static/js/cssrem.js"></script>
    <link href="static/css/style.css" rel="stylesheet">
</head>

<body>
<script>
if (
  typeof test !== 'undefined' ||
  (typeof window.webkit !== 'undefined' &&
    navigator.userAgent.toLowerCase().match(/MicroMessenger/i) !=
      'micromessenger')
) {
  document.write(
    '<header class="header"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback active dib"></a><div class="title ell g3">支付结果</div></div></header>'
  )
}else{
  document.write(
    '<header class="header dn"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback active dib"></a><div class="title ell g3">支付结果</div></div></header>'
  )
}
</script>
<!-- <header class="header">
    <div class="header-bg"></div>
    <div class="titlet-bar white">
        <a href="javascript:;" class="btn-goback active dib"></a>
        <div class="title ell g3">支付结果</div>
    </div>
</header> -->
<div class="content bgwh">
    <div class="wrapper">
        <div class="m20 p20"></div>
				<input type="hidden" value="${code }" id="code" />
       			<div class="dn success">
                	<div class="icon-success auto photo100"><img alt="" src="static/images/icon-success.png"></div>
                		<dl class="tc mt20 pt20">
                    	<dt class="f36 g3">支付成功</dt>
                    	<dd class="f28 g9 pt20">您已成功支付<span class="money"></span>元</dd>
                	</dl>
				</div>
				<div class="failure">
	                <div class="icon-failure auto photo100"><img alt="" src="static/images/icon-failure.png"></div>
	                <dl class="tc mt20 pt20">
	                    <dt class="f36" style="color: #ff2521;">支付中<span class="countdown">5</span></dt>
	                    <dd class="f28 g9 pt20">请耐心等待！</dd>
	                </dl>
                </div>


        <div class="m20 p20"></div>
        <div class="tc m20 p20 f0">
            <a class="btn-submit btn-submit--plain db" style="width:auto;margin-top:20px;"
               href="javascript:goMainPage();">查看权益</a>
            <a class="btn-submit db" style="width:auto;margin-top:20px" href="javascript:goAdoptPage();">继续认养</a>
        </div>
    </div>
</div>
<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script type="text/javascript" src="static/js/app.js"></script>
<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript">

	var success = document.querySelector('.success')
	var failure = document.querySelector('.failure')
	var eMoney = document.querySelector('.money')
	var eCountdown = document.querySelector('.countdown')
	
	
	countdown()
	
	function countdown(){
		
		var second = 5;
		var time
		function less(){
			if(second<=0){
				eCountdown.classList.add('dn')
				getResult()
				return clearTimeout(time);
			}
			second-=1;
			eCountdown.innerHTML = second
			time = setTimeout(less, 1000)
		}	
		less()
	}
	
	function getResult() {
        axios({
            method: 'post',
            url: '/wap/result/getResult?code='+document.querySelector("#code").value
        }).then(function (res) {
            var data = res.data;
            var state = data.result.state;
            if (state == 1) {
            	var priceState = data.state;
                var price = data.price;
                
                if(priceState == '01'){
                	success.classList.remove('dn')
                	failure.classList.add('dn')
                	eMoney.innerHTML = price
                }else{
                	success.classList.add('dn')
                	failure.classList.remove('dn')
                	eCountdown.classList.add('dn')
                }
            } else {
                
            }
        }).catch(function (err) {

        });


    }



    function goAdoptPage() {
        if (typeof test !== 'undefined') {
            test.goAdoptPage()
        } else if (typeof window.webkit !== 'undefined') {
            window.webkit.messageHandlers.goAdoptPage.postMessage('ios')
        }else{
        	
        }

    }

    function goMainPage() {
        if (typeof test !== 'undefined') {
            test.goMainPage()
        } else if (typeof window.webkit !== 'undefined') {
            window.webkit.messageHandlers.goMainPage.postMessage('ios')
        }else{
        	
        }
    }
</script>

</body>
</html>
